<template>
  <div class="monitor-list flex flex-column">
    <antd-form :options="options" class="flex-fixed" style="margin: 10px 20px" @submit="formChange" />
    <common-table
      ref="Table"
      :fetch="getTableDataAsync"
      :pagination="{ pageSize: 15 }"
      :fetch-params="paramsData"
      :columns="columns"
      :show-toolbar="false"
      @vue:mounted="() => $refs.Table.load()"
      class="flex-auto-height"
    >
      <template #index="{ index }">{{ index + 1 }}</template>
      <template #is_online="{ text, scope }">
        <template
          v-if="
            scope.stream_type == 2 &&
            (scope.get_stream_way == 'HK_130_CD' || scope.get_stream_way == 'DY_ICC' || scope.get_stream_way == 'HZ')
          "
        >
          <span :style="{ color: scope.is_online == 1 ? '#1e9fff' : '#ff5722' }">{{
            scope.is_online == 1 ? '在线' : '离线'
          }}</span>
        </template>
        <template v-else>-</template>
      </template>
      <template #action="{ text, scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
      </template>
    </common-table>
  </div>
</template>

<script>
// import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { monitorList } from '@gis/lib/api';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { openMonitorDetailsDialog } from './monitor-opt.js';

export default {
  name: 'monitor-list',
  // mixins: [areaCodeMixin],
  props: {
    type: { type: String }, //监控类型 - D0112
    area_code: { type: String },
  },
  setup() {
    const dicDataStore = useDicDataStore();
    return { dicDataStore };
  },
  data() {
    return {
      formData: {},
      columns: [
        { title: '所属区域', dataIndex: 'area_name', width: 120 },
        { title: '监控点位名称', dataIndex: 'monitor_name' },
        { title: '监控点位地址', dataIndex: 'address' },
        {
          title: '类型',
          dataIndex: 'type',
          width: 120,
          customRender: (v) => this.monitorTypeObj[v] || '',
        },
        // { title: '省级编号', dataIndex: 'ai_no', width: 100 },
        { title: '是否在线', dataIndex: 'is_online', width: 100, scopedSlots: { customRender: 'is_online' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100 },
      ],
    };
  },
  computed: {
    paramsData() {
      const userInfoStore = useUserInfoStore();
      return Object.assign(
        {},
        { area_code: this.area_code ? this.area_code : userInfoStore.area_code, type: this.type },
        this.formData
      );
    },
    monitorTypeObj() {
      return this.dicDataStore.getDicData('D0112');
    },
    monitorTypeList() {
      return this.dicDataStore.getDicDataList('D0112');
    },
    options() {
      return [
        {
          component: 'a-input',
          label: '监控名称',
          field: 'monitor_name',
        },
        {
          component: 'a-input',
          label: '监控地址',
          field: 'address',
        },
        {
          component: 'a-select',
          label: '是否在线',
          field: 'is_online',
          props: {
            options: [
              { label: '在线', value: '1' },
              { label: '离线', value: '0' },
            ],
          },
        },
        {
          component: 'a-select',
          label: '类型',
          field: 'type',
          props: {
            options: this.monitorTypeList,
          },
        },
      ];
    },
  },
  methods: {
    formChange(val) {
      this.formData = val;
      this.$nextTick(() => {
        this.$refs.Table.load();
      });
    },
    details(data) {
      openMonitorDetailsDialog(data);
    },
    async getTableDataAsync(params) {
      return await handleTableRes(monitorList(params));
    },
  },
};
</script>

<style scoped lang="less">
.monitor-list {
  width: 100%;
  height: 100%;
}
</style>
